<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-filter>
				<div class="nav base-flex" style="margin-right:10px">
					<div class="nav-li">
						<el-select
							size="mini"
							class="el-select"
							v-model="select.specialType"
							placeholder="请选择"
							@change="
								val =>
									crud.refresh({
										specialType: val,
										floorId: ''
									})
							"
						>
							<el-option
								v-for="item in options.specialTypeOp"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							>
							</el-option>
						</el-select>
					</div>
				</div>
			</template>
			<template #slot-setSort="{scope}">
				<span class="setsort" @click="setGoodsort(scope.row)">
					修改
				</span>
			</template>
			<template #slot-add="{scope}">
				<span class="setsort" @click="setGoodsort(scope.row)">
					修改
				</span>
			</template>
		</cl-crud>

		<cl-form ref="cl-form"></cl-form>
	</div>
</template>

<script>
export default {
	name: 'open_crud',
	data() {
		return {
			crud: null,
			select: {
				specialType: 100
			},
			options: {
				specialTypeOp: [
					{
						value: 0,
						label: '大额券'
					},
					{
						value: 1,
						label: '天猫国际'
					},
					{
						value: 2,
						label: '品牌优选'
					},
					{
						value: 100,
						label: '百万补贴'
					}
				]
			}
		};
	},

	methods: {
		setGoodsort(item) {
			const self = this;
			this.$refs['cl-form'].open({
				props: {
					'label-width': '80px',
					width: '470px',
					center: true,
					'custom-class': 'custom-class-dialog-mini'
				},
				items: [
					{
						prop: 'floorId',
						label: '分类id',
						span: 16,
						value: item.floorId,
						component: {
							name: 'el-input'
						}
					},
					{
						prop: 'mainName',
						label: '分类名称',
						span: 20,
						value: item.mainName,
						component: {
							name: 'el-input'
						}
					},
					{
						prop: 'specialType',
						label: '类型',
						span: 13,
						value: item.specialType,
						component: {
							name: 'el-select',
							options: this.options.specialTypeOp
						}
					},
					{
						prop: 'level',
						label: '排序',
						value: item.level,
						span: 13,
						component: {
							name: 'el-input'
						}
					}
				],
				on: {
					submit({ data, close }) {
						self.$service.goodsMenagement.specialClassify
							.update({
								...data,
								id: item.id,
								app: item.gids
							})
							.then(() => {
								self.$message({
									message: '设置成功',
									type: 'success'
								});
								self.crud.refresh();
								close();
								return;
							})
							.catch(err => {
								self.$message.error(err);
							});
					}
				}
			});
		},
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.goodsMenagement.specialClassify)
				.set('dict', {
					label: {
						delete: '删除'
					}
				})
				.set('table', {
					columns: [
						{
							label: '分类名',
							prop: 'mainName',
							align: 'center'
						},
						{
							label: '分类id',
							prop: 'floorId',
							align: 'center'
						},
						{
							label: '排序',
							prop: 'level',
							align: 'center'
						}
					],

					op: {
						layout: ['slot-setSort', 'delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '70px',
						width: '400px',
						center: true,
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						{
							prop: 'floorId',
							label: '分类id',
							span: 16,
							component: {
								name: 'el-input'
							}
						},
						{
							prop: 'mainName',
							label: '分类名称',
							span: 20,
							component: {
								name: 'el-input'
							}
						},
						{
							prop: 'specialType',
							label: '类型',
							span: 13,
							value: 100,
							component: {
								name: 'el-select',
								options: this.options.specialTypeOp
							}
						},
						{
							prop: 'level',
							label: '排序',
							value: 100,
							span: 13,
							component: {
								name: 'el-input'
							}
						}
					]
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'query', 'flex1', 'slot-filter'],
					['data-table']
				])
				.done();

			app.refresh({
				prop: 'level',
				order: 'asc',
				// sort: 'asc',
				specialType: this.select.specialType
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.setsort {
	color: $color-link;
	cursor: pointer;
	margin: 5px 5px 5px 15px;
	:hover {
		opacity: 0.8;
	}
}
.nav {
	font-size: $font12;
	.nav-li {
		margin-left: 10px;
	}
}

</style>
